<template>
  <div>
    <info-header title="账号绑定" />
    <div class="content">
      <bind-item
        icon="el-icon-mic"
        title="麦克风"
        sub-title="用于提供更优质的音视频会议服务"
        :status="soundStatus"
        :ctrl="soundCtrl"
        @click="handleSoundClick"
      />
      <bind-item
        icon="el-icon-lock"
        title="密码"
        sub-title="用于保护账号信息和登录安全"
        :status="pwdStatus"
        :ctrl="pwdCtrl"
        @click="handlePwdClick"
      />
      <bind-item
        icon="el-icon-mobile-phone"
        title="手机"
        sub-title="可用手机号登录HiTeam视频会议，可通过手机号找回密码"
        :status="phoneStatus"
        :ctrl="phoneCtrl"
        @click="handlePhoneClick"
      />
      <bind-item
        icon="el-icon-message"
        title="邮箱"
        sub-title="可用邮箱登录HiTeam视频会议，可用邮箱找回密码"
        :status="emailStatus"
        :ctrl="emailCtrl"
        @click="handleEmailClick"
      />
    </div>
    <!-- <form-dialog
      title="设置密码"
      :visible.sync="pwdInitDialogVisible"
      width="500px"
    >
      <init-pwd-form
        @submit="handlePwdInit"
        @cancel="handlePwdInitCancel"
      />
    </form-dialog>
    <form-dialog
      title="麦克风测试"
      :visible.sync="soundSetDialogVisible"
    >
      <sound-set-form
        @submit="handleVoiceRegisterSubmit"
        @cancel="handleVoiceRegisterCancel"
      />
    </form-dialog> -->
    <el-dialog
      :visible.sync="pwdChangeDialogVisible"
      width="500px"
    >
      <dialog-self title="修改密码">
        <div class="dialog-box">
          <change-pwd-form
            ref="changePwdRef"
            @submit="handlePwdChange"
            @cancel="handlePwdChangeCancel"
          />
        </div>
      </dialog-self>
    </el-dialog>
    <el-dialog
      :visible.sync="phoneDialogVisible"
      width="500px"
    >
      <dialog-self title="绑定手机号">
        <div class="dialog-box">
          <phone-form
            ref="phoneRef"
            @submit="handlePhoneChangeSubmit"
            @cancel="handlePhoneChangeCancel"
          />
        </div>
      </dialog-self>
    </el-dialog>
    <el-dialog
      :visible.sync="emailDialogVisible"
      width="500px"
    >
      <dialog-self title="绑定手机号">
        <div class="dialog-box">
          <email-form
            ref="emailRef"
            @submit="handleEmailChangeSubmit"
            @cancel="handleEmailChangeCancel"
          />
        </div>
      </dialog-self>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
// import InitPwdForm from './form/InitPwdForm'
import ChangePwdForm from './form/ChangePwdForm'
import PhoneForm from './form/PhoneForm'
import EmailForm from './form/EmailForm'
import { setToken } from '@/utils/auth'
import BindItem from '@/components/BindItem'
export default {
  name: 'AccountBind',
  components: {
    // InitPwdForm,
    ChangePwdForm,
    PhoneForm,
    EmailForm,
    BindItem
  },
  data () {
    return {
      pwdInitDialogVisible: false,
      pwdChangeDialogVisible: false,
      soundSetDialogVisible: false,
      phoneDialogVisible: false,
      emailDialogVisible: false
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo
    }),
    ...mapGetters({
      hasPwd: 'hasPassword',
      hasSound: 'hasVoice'
    }),
    hasPhone () {
      return this.userInfo && this.userInfo.phonenumber
    },
    hasEmail () {
      return this.userInfo && this.userInfo.email
    },
    // 声纹状态
    soundStatus () {
      return this.hasSound ? '已测试' : '未测试'
    },
    // 声纹操作
    soundCtrl () {
      return this.hasSound ? '正常' : '测试'
    },
    // 密码状态
    pwdStatus () {
      return this.hasPwd ? '已设置' : '未设置'
    },
    // 密码操作
    pwdCtrl () {
      return this.hasPwd ? '修改' : '设置'
    },
    // 手机状态
    phoneStatus () {
      return this.hasPhone || '未绑定'
    },
    // 手机操作
    phoneCtrl () {
      return this.hasPhone ? '更改' : '绑定'
    },
    // 邮箱状态
    emailStatus () {
      return this.hasEmail || '未绑定'
    },
    // 邮箱操作
    emailCtrl () {
      return this.hasEmail ? '更改' : '绑定'
    }
  },
  methods: {
    ...mapActions({
      getUserInfo: 'user/getUserInfo'
    }),
    // 声纹相关操作
    // 点击声纹按钮
    handleSoundClick () {
      this.hasSound ? this.handleSoundViewClick() : this.handleSoundSetClick()
    },
    // 查看声纹
    handleSoundViewClick () {
      this.$message.info('功能开发中，敬请期待。。。')
    },
    // 点击设置声纹
    handleSoundSetClick () {
      this.soundSetDialogVisible = true
    },
    // 注册声纹
    handleVoiceRegister (file) {
      this.$request.user.voiceRegister(
        file,
        () => {
          this.$message.success('麦克风正常')
          this.soundSetDialogVisible = false
          this.getVoice()
        },
        (err) => {
          this.$message.error(err.msg)
        }
      )
    },
    // 提交声纹
    handleVoiceRegisterSubmit (file) {
      this.handleVoiceRegister(file)
    },
    // 取消提交
    handleVoiceRegisterCancel (file) {
      this.soundSetDialogVisible = false
    },
    // 密码相关操作
    // 点击密码按钮
    handlePwdClick () {
      this.hasPwd ? this.handlePwdChangeClick() : this.handlePwdInitClick()
    },
    // 初始化密码相关操作
    handlePwdInitClick () {
      this.pwdInitDialogVisible = true
    },
    handlePwdInitCancel () {
      this.pwdInitDialogVisible = false
    },
    handlePwdInit (res) {
      this.$message.success('设置密码成功')
      this.pwdInitDialogVisible = false
      const { token, refreshToken } = res
      setToken('token', token)
      setToken('refreshToken', refreshToken)
      this.getPassword()
    },
    // 修改密码相关操作
    // 点击修改密码
    async handlePwdChangeClick () {
      this.pwdChangeDialogVisible = true
      await this.$nextTick()
      this.$refs.changePwdRef.reset()
    },
    // 取消修改密码
    handlePwdChangeCancel () {
      this.pwdChangeDialogVisible = false
    },
    // 修改密码
    handlePwdChange (data) {
      this.$message.success('修改密码成功')
      this.pwdChangeDialogVisible = false
      const { token, refreshToken } = data
      setToken('token', token)
      setToken('refreshToken', refreshToken)
      this.getUserInfo()
    },
    // 手机相关操作
    // 点击手机按钮
    handlePhoneClick () {
      this.hasPhone ? this.handlePhoneChangeClick() : this.handlePhoneBindClick()
    },
    // 修改手机号
    async handlePhoneChangeClick () {
      this.phoneDialogVisible = true
      await this.$nextTick()
      this.$refs.phoneRef.reset()
    },
    // 绑定手机号
    async handlePhoneBindClick () {
      this.phoneDialogVisible = true
      await this.$nextTick()
      this.$refs.phoneRef.reset()
    },
    // 更改手机号
    handlePhoneChangeSubmit () {
      this.phoneDialogVisible = false
      this.getUserInfo()
    },
    // 取消更改手机号
    handlePhoneChangeCancel () {
      this.phoneDialogVisible = false
    },
    // 邮箱相关操作
    // 点击邮箱
    handleEmailClick () {
      this.hasEmail ? this.handleEmailChangeClick() : this.handleEmailBindClick()
    },
    // 修改邮箱
    async handleEmailChangeClick () {
      this.emailDialogVisible = true
      await this.$nextTick()
      this.$refs.emailRef.reset()
    },
    // 绑定邮箱
    async handleEmailBindClick () {
      this.emailDialogVisible = true
      await this.$nextTick()
      this.$refs.emailRef.reset()
    },
    // 更改邮箱
    handleEmailChangeSubmit () {
      this.emailDialogVisible = false
      this.getUserInfo()
    },
    // 取消修改邮箱
    handleEmailChangeCancel () {
      this.emailDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    border-bottom: 1px solid #d0d6d9;
    padding: 0 40px;
    .item-content {
      .item-icon {
        font-size: 25px;
        margin-right: 20px;
        color: #545c63;
      }
      display: flex;
      align-items: center;
      .item-name {
        font-size: 16px;
        font-weight: 700;
        color: #2b333b;
        .item-status {
          font-size: 13px;
          font-weight: normal;
          color: #2b333b;
        }
      }
      .item-intro {
        font-size: 14px;
        color: #535b68;
      }
    }
    .item-ctrl {
      height: 40px;
      line-height: 40px;
      width: 80px;
      text-align: center;
      border-radius: 20px;
      border: 1px solid #7c8790;
      font-size: 16px;
      cursor: pointer;
      color: #7c8790;
      &:hover {
        color: #2d3135;
        border-color: #2d3135;
      }
      & + .item-ctrl {
        margin-left: 10px;
      }
    }
  }
}
.dialog-box {
  padding: 20px 30px 20px;
}
</style>
